<template>
	<view class="tabbar">
		<view class="tab-item" v-for="(item,index) in tabs" @click="changetab(index)">
			<!-- <image :src="current==index?item.select_img:item.img" mode=""></image> -->
				<u-icon :name="item.icname" :color="current==index?item.scolor:item.color" size="26" ></u-icon>
			<text :class="current==index?'s_text':'d_text'">{{$t(item.name)}}</text>
			<view class="number"v-if="totalnumber && index==1"  >{{totalnumber}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TabBar",
		props: {
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabs: [
					{
						// img: require("../static/tab-1/home.png"),
						// select_img: require("../static/tab-1/homeA.png"),
						icname:'home-fill',
						scolor:'#45bc1b',
						color:'#a7a7a7',
						name: 'Home',
						url:'/pages/index/index'
					},
					{
						// img: require("../static/tab-1/home.png"),
						// select_img: require("../static/tab-1/homeA.png"),
						icname:'shopping-cart-fill',
						scolor:'#45bc1b',
						color:'#a7a7a7',
						name: 'Cart',
						url:'/pages/cart/cart'
					},
					{
						// img: require("../static/tab-1/blindBox.png"),
						// select_img: require("../static/tab-1/blindBoxA.png"),
						icname:'file-text-fill',
						scolor:'#45bc1b',
						color:'#a7a7a7',
						name:'Order',
						url:'/pages/order/order'
					},
					{
						// img: require("../static/tab-1/my.png"),
						// select_img: require("../static/tab-1/myA.png"),
						icname:'account-fill',
						scolor:'#45bc1b',
						color:'#a7a7a7',
						name: 'Me',
						url:'/pages/me/me'
					},

				]
			};
		},
		computed: {
		
			i18nLocale() {
				return this.$i18n.locale;
			},
		
			price() {
				return this.$store.state.shop.totalprice;
			},
			totalnumber() {
				return this.$store.state.shop.totalnumber;
			},
			totalshop() {
				return this.$store.state.shop.totalshop;
			},
		},
		methods: {
			changetab(index) {
				 this.$emit('changetab',index);
		}
	}
	}
</script>

<style lang="scss">
	.tabbar {
		width: 100%;
		z-index: 99;
		position: fixed;
		bottom: 0;
		background-color:transparent;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -20rpx 46rpx  rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		padding: 20rpx 0rpx;
	}

	.tab-item {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: $uni-font-size-sm1;
		box-sizing: border-box;
		position: relative;
		.number{
			position: absolute;
			top:0%;
			right:16%;
			width:25rpx;
			height:25rpx;
			padding: 5rpx;
			border-radius: 100%;
			background-color:$uni-color-topic;
			color:#fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $uni-font-size-sm0;
		}
		.d_text {
			color: #a7a7a7;
		}

		.s_text {
			color: $uni-color-topic;
			// margin-top: 5rpx;
		}
	}
</style>